<script setup lang="ts">
import { reactive, ref } from 'vue'

import { useUserStore } from '@/stores/user';
import { newbie } from '@/mock/index'
import { uploadTaskEventToGA } from '@/utils'

import { fetchNewbieTask, uploadTaskEventToAdmin } from '@/api/task';

import BiSkeleton from '@/components/bi-skeleton/index.vue'
import BiTaskCard from '@/components/bi-task-card/index.vue'

const userStore = useUserStore()
const newbieBenefit = reactive<any>(newbie)
const loading = ref(true)
const handleStopLoading = () => {
    loading.value = false
}
const handleFetchNewbieTask = async () => {
    try {
        const newbieTask = (await fetchNewbieTask({ deviceInfo: userStore.device })).data.data
        newbieBenefit.login = Object.assign(newbieBenefit.login, newbieTask[0])
        newbieBenefit.watchAds = Object.assign(newbieBenefit.watchAds, newbieTask[1])
        handleStopLoading()
    } catch (error) {
        throw new Error(error as string)
    }
}
handleFetchNewbieTask()
defineExpose({
    handleFetchNewbieTask
})


interface NewBieTaskBtn {
    isComplete: number,
    name: string,
    goId: string | number,
    fn: () => {}
}
const handleUseBenefitMethods = (task: NewBieTaskBtn): void => {
    const unCompleted = task.isComplete == 2
    if (unCompleted) {
        uploadTaskEventToGA(task.name)
        uploadTaskEventToAdmin({
            device: userStore.device,
            moduleType: 1,
            eventType: task.goId
        })
        task.fn()
    }
}

enum newbieStatus {
    unComplete = 0,
    completed = 2
}
const taskStatus = (task: any) => {
    if (task.isComplete == 1) {
        return task.isComplete == 1 ? newbieStatus.completed : newbieStatus.unComplete
    }
}

</script>

<template>
    <div class="box">
        <div class="box-title">
            <span style="font-size: 5.2vmin;">Newbie Benefits</span>
            <span>(Can be withdrawn directly <span style="color: red;"> $1.0 </span>)</span>
        </div>
        <ul class="list">
            <li v-for="task in newbieBenefit" :key="task.goId">
                <BiSkeleton v-if="loading" />
                <BiTaskCard v-else @btn-click="handleUseBenefitMethods(task)" :name="task.taskName" :icon="task.imgUrl"
                    :status="taskStatus(task)" type="none" :hide-count="task.total <= 1" :finish-count="task.finishedNum" :total-count="task.total"></BiTaskCard>
            </li>
        </ul>
    </div>
</template>

<style scoped lang="scss">
.box-title {
    span {
        font-size: var(--mini-font-size);
    }
}

.list {
    background-color: #fff;
    padding: 6vmin 3vmin;

    li {
        margin-bottom: 3vmin;

        &:last-child {
            margin-bottom: 0
        }
    }
}
</style>